<template>
    <div>
     <div class="tui-picker-content">
        <div class="tui-picker-name">接口请求数据一级选择实例</div>
        <picker    :value="countryIndex" :range="countryList"  @change="changeCountry">
          <div class="tui-picker-detail">{{countryList[countryIndex]}}</div>
        </picker>
      </div>

      <div class="tui-picker-content">
        <div class="tui-picker-name">省市区三级联动选择</div>
        <picker  mode = "region" :value="region" @change="changeRegin">
          <div class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</div>
        </picker>
      </div>

      <div class="tui-picker-content">
        <div class="tui-picker-name">自定义二级联动选择</div>
        <picker   mode = "multiSelector" :value="multiIndex" :range="multiArray" @change="changeMultiPicker">
          <div class="tui-picker-detail">
            {{multiArray[0][multiIndex[0]]}} * {{multiArray[1][multiIndex[1]]}} = {{multiArray[0][multiIndex[0]] * multiArray[1][multiIndex[1]]}}
          </div>
        </picker>
      </div>

      <div class="tui-picker-content">
        <div class="tui-picker-name">自定义三级联动选择</div>
        <picker mode = "multiSelector" :value="multiIndex3" :range="multiArray3" @change="changeMultiPicker3">
          <div class="tui-picker-detail">
            {{multiArray3[0][multiIndex3[0]]}} * {{multiArray3[1][multiIndex3[1]]}} * {{multiArray3[2][multiIndex3[2]]}} = {{multiArray3[0][multiIndex3[0]] * multiArray3[1][multiIndex3[1]] * multiArray3[2][multiIndex3[2]]}}
          </div>
        </picker>
      </div>

    </div>
</template>

<script>
  import {mapState, mapMutations,mapActions} from 'vuex';
  export default {
    name: "",
    data() {
      return {
       // 普通选择器列表设置,及初始化
        countryList: ["四川省", "广元市", "苍溪县"],
        countryIndex: 0,
        // 省市区三级联动初始化
        region: ["四川省", "广元市", "苍溪县"],
        // 多列选择器(二级联动)列表设置,及初始化
        multiArray: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]],
        multiIndex: [3,5],
        // 多列选择器(三级联动)列表设置,及初始化
        multiArray3: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]],
        multiIndex3: [3, 5, 4]

      };
    },
    // 可请求数据
    created() {
       this.CityList()
    },
    //绑定dom对象
    mounted(){
      const self=this;
      this.cityList.map(function(value) {
        self.countryList.push(value.province)
      });
     },
    // 计算函数
    computed: {
      ...mapState([
        'cityList'
      ])


    },
    // 方法
    methods: {
      // 选择国家函数
      changeCountry(e){

        this.countryIndex=e.mp.detail.value;

      },
      // 选择省市区函数
      changeRegin(e){
        this.region=e.mp.detail.value
      },
      // 选择二级联动
      changeMultiPicker(e) {
        this.multiIndex=e.mp.detail.value
     },
      // 选择三级联动
      changeMultiPicker3(e) {
        this.multiIndex3=e.detail.value

      },

    ...mapActions([
       "CityList"
      ])

    }
    ,
     // 子组件
    components: {

    }
  };
</script>

<style scoped>
  ul li{

    float: left;

  }
  .tui-picker-content{
    padding: 30px;
    text-align: center;
  }
  .tui-picker-name{
    height: 80px;
    line-height: 80px;
  }
  .tui-picker-detail{
    height: 80px;
    line-height: 80px;
    background-color: #fff;
    font-size: 25px;
    padding: 0 10px;

  }


</style>
